<!--
  遮罩层组件     zls-2022/01/25
-->

<template>
  <div class="mask" :class="[maskShow]" :style="[maskStyle]" @click="emit('close')" @contextmenu.prevent=""></div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
const emit = defineEmits(['close'])
const props = defineProps({
  // 是否显示蒙层（默认不显示）
  show: {
    type: Boolean,
    default: false,
    required: true
  },
  // 蒙层的背景色
  bgColor: {
    type: String,
    default: 'rgba(0,0,0,.3)'
  },
  // 蒙层距离上方的top值(正常传Number类型。String传的是百分比)
  top: {
    type: [Number, String],
    default: 0
  },
  // 蒙层距离下方的bottom值(正常传Number类型。String传的是百分比)
  bottom: {
    type: [Number, String],
    default: 0
  },
  // 遮罩高度(正常传Number类型。String传的是百分比)
  height: {
    type: [Number, String],
    default: 'auto'
  },
  // 显示层级(默认为8，一般情况下不会使用，只有弹框里嵌套弹框时，才需要传递)
  zIndex: {
    type: Number,
    default: 8888
  }
})
const maskShow = computed(() => (props.show ? 'show' : ''))
const maskStyle = computed(() => {
  return {
    backgroundColor: props.bgColor,
    top: typeof props.top === 'number' ? props.top + 'px' : props.top,
    bottom: typeof props.bottom === 'number' ? props.bottom + 'px' : props.bottom,
    height: typeof props.height === 'number' ? props.height + 'px' : props.height,
    zIndex: props.zIndex
  }
})
</script>
<script lang="ts">
export default {
  name: 'z-mask'
}
</script>

<style scoped lang="scss">
.mask {
  position: fixed;
  // z-index: 8888;
  left: 8000px;
  top: 0;
  width: 100%;
  margin: auto;
  &.show {
    left: 0;
  }
}
</style>
